<template>
	<view>
		<view class="modal_lott fadeIn_an"  @touchmove.prevent v-if="lottModal">
			<view class="content lott"  v-if="pageStatus==1">
				<view class="btn" @click="startLott">
					立即抽奖
				</view>
				<view class="msg" v-if="isNeglect">
					查看奖品信息前往 <span @click="openPrizeList">我的奖品</span>
				</view>
				<view class="vote_ads" @click="jumpNew(lottads.link)">
					<img :src="lottads.image" alt=""/>
				</view>
				<view class="chance">
					还可以抽 <span>{{chance}}</span> 次
				</view>
				<view class="close" @click="closeLott">
					<img src="~@/static/guess/close.png" alt="">
				</view>
			</view>
			<view class="content lottGua"   v-if="pageStatus==3">
				<view class="title" v-if="title!=''">
					{{title}}
				</view>
				<view class="gua" :style="{background: 'url('+ qiniuUrl +'canvas_pink.png) center center no-repeat', boxShadow:' rgba(168, 11, 206, 0.27) 0px 2px 8px 1px'}">
					<view class="do">
						<view class=" gua_img_box" @click="handlerGua" v-if="showAdv && lottads.image!=''">
							<img :src="lottads.image"></img>
						</view>
						<view class="gua_com">
							<guaCanvas ref="guaCanvas" :gdata="guaData" class="guaRef" :widthCanvas="528"  :heightCanvas="242"  @start="getPrize" @finish="handlerGuafinish"></guaCanvas>
						</view>
					</view>
					
					<view class="prize fadeIn_an" v-if="hasPrize"  @click="closePrize"> 
						<template v-if="prizeStatus==1">
							<view class="modal_title">恭喜你获得</view>
							<view class="classImage">
								<image :src="formatImage(prizeData)" mode="scaleToFill"></image>
							</view>
							<view class="prize_title">
								{{prizeData.title}}
							</view>
						</template>
						<template v-if="prizeStatus==2">
							<view class="aglin" @click.stop="aginGua">
								在玩一次
							</view>
						</template>
						
					</view>
				</view>
				<view class="msg" v-if="isNeglect">
					查看奖品信息前往 <span @click="openPrizeList">我的奖品</span>
				</view>
				<view class="chance">
					还可以抽 <span>{{chance}}</span> 次
				</view>
				<view class="close" @click="closeLott">
					<img src="~@/static/guess/close.png" alt="">
				</view>
			</view>
			<view class="content lottGua lottWheel"   v-if="pageStatus==2">
				<view class="title" v-if="title!=''">
					{{title}}
				</view>
				<view class="wheel_con">
					<view class="wheel_com">
						 <turnTable class="wheel_c" ref="tunrTable" :prizeList="prizeList" :status="2" :prize="prizeId" @start="getPrizeTunTable" @back="handlerWheelfinish"></turnTable>
					</view>
					 <view class="prize fadeIn_an" v-if="hasPrize"  @click="closePrize">
					 	<view class="modal_title">恭喜你获得</view>
					 	<view class="classImage">
					 		<image :src="formatImage(prizeData)" mode="scaleToFill"></image>
					 	</view>
					 	<view class="prize_title">
					 		{{prizeData.title}}
					 	</view>
					 </view>
				</view>
				<view class="msg" v-if="isNeglect">
					查看奖品信息前往 <span @click="openPrizeList">我的奖品</span>
				</view>
				<view class="vote_ads" @click="jumpNew(lottads.link)">
					<img :src="lottads.image" alt=""/>
				</view>
				<view class="close" @click="closeLott">
					<img src="~@/static/guess/close.png" alt="">
				</view>
			</view>
			<view class="content lottGua cards"   v-if="pageStatus==4">
				<view class="title" v-if="title!=''">
					{{title}}
				</view>
				<view class="card_con">
					<div class="card" :class="{'an1_rotate':startAni==index,'an1_carsh':washCard,}" :style="{'zIndex':index==1?'2':'1'}" v-for="(iten,index) in 3" @click="rotateCard(index)">
						<img  v-if="noCardBg!=index " :src="qiniuUrl+'cardsicon.png'" alt="">
						<view v-else class="prize_info">
							<view class="prize_img" :style="{'background':'url('+formatImage(prizeData)+') no-repeat center center'}"></view>
							<view class="prize_title">{{ prizeData.title }}</view>
						</view>
					</div>
				</view>
				<view class="msg" v-if="isNeglect">
					查看奖品信息前往 <span @click="openPrizeList">我的奖品</span>
				</view>
				<view class="vote_ads" @click="jumpNew(lottads.link)">
					<img :src="lottads.image" alt=""/>
				</view>
				<view class="chance">
					还可以抽 <span>{{chance}}</span> 次
				</view>
				<view class="close" @click="closeLott">
					<img src="~@/static/guess/close.png" alt="">
				</view>
			</view>
			<view class="content prize_modal"  v-if="pageStatus==11">
				<view class="top_img">
					<image class="" src="../../static/collect/prize_top.png" mode="scaleToFill"></image>
				</view>
				
				<view class="classImage">
					<image :src="formatImage(prizeData)" mode="scaleToFill"></image>
				</view>
				<view class="prize_title">
					{{prizeData.title}}
				</view>
				 
				<view class="btn">
					<view class="back" @click="closeLott">返回</view>
					<view class="" v-if="chance>0" @click="pageStatus = 1">
						继续抽奖
					</view>
					<view v-else class="" @click="openPrizeList"> 查看奖品 </view>
				</view>
			</view>
			<view class="content prize_modal"  style="height: auto;" v-if="pageStatus==12">
				<view class="classImage" style="margin-top: 40rpx;">
					<image src="../../static/guess/prize.png" mode="scaleToFill"></image>
				</view>
				<view class="prize_title">
					很遗憾，您未中奖
				</view>
				 
				<view class="btn">
					<view class="back" @click="closeLott">返回</view>
					<view class="" @click="pageStatus = 1">继续抽奖 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {workLottery,prizeList} from '@/api/api'
import {getActivityPrize} from '@/api/turnTable.js'
import {checkImage,checkLogin} from '@/until/QFH5.js'
import { mapGetters } from 'vuex';
	export default{
		computed:{
			...mapGetters(['qiniuUrl'])
		},
		props:{
			title:{
				default:''
			},
			plugin:{
				default:()=>{
					return {type:'vote',plugin:'vote'}
				}
			},
			isNeglect:{
				default:false
			},
			chance:{
				default:0
			}
		},
		
		data(){
			return{
				actid:'',
				lottModal:false,
				lottads:{image:'',link:''},
				data:{},
				pageStatus:4,
				
				showAdv:true,
				guaSock:false,
				guaData:{
					type:'text',
					content:'还差一点，继续刮！'
				},
				prizeData:{},
				hasPrize:false,
				prizeStatus:5,
				
				prizeList:[],//转盘奖品
				prizeId:0,//转盘中奖id,
				lottSock:false,

				startAni:-1,
				noCardBg:-1,
				washCard:false,
				animationSock:false,//动画
			}
		},
		methods:{
			openPrizeList(){
				let url ='/plugin/pages/'+this.plugin.plugin+'/prize?id='+this.actid
				this.$navigateTo({ url:url})
			},
			formatImage(data){
				return checkImage(data.type,data.image)
			},
			//打开三方链接
			jumpNew(url){
			  if('' == url || undefined == url){
			    return;
			  }else{
			    window.open(url)
			  }
			},
			//随机一个广告
			initAds(){
				let length =  this.data.settings.vote_ads.length
				if(length>0){
					let randomNum = Math.floor(length* Math.random())
					this.lottads = this.data.settings.vote_ads[randomNum]
				}else{
					this.lottads = {image:''}
				}
				
			},
			//打开抽奖弹窗
			openLott(){
				this.pageStatus = this.data.settings.prize_play_type
				this.lottModal = true
				this.lottSock = false
			},
			closeLott(){
				this.lottModal = false
				this.hasPrize = false
				if(this.pageStatus==3){
					//刮奖需要重置
					this.hasPrize = false
					this.guaData.content = '还差一点，继续刮！'
					this.showAdv = true
					this.$refs.guaCanvas.initDrawCanvas()
				}
				if(this.pageStatus==4){
					this.startAni=-1
					this.noCardBg=-1
					this.washCard=false
					this.animationSock=false//动画
				}
			},
			startLott(){
				if(this.chance==0){
					uni.showToast({
						title:'没有抽奖机会了哦',
						icon:'none'
					})
					return
				}
				this.start()
			},
			//抽奖
			start(){
				workLottery({actid:this.actid,plugin:this.plugin.plugin},this.plugin.type,this.plugin.plugin).then(res=>{
					if(res.code==0){
						this.guaData.content = res.data.msg
						if(res.data.ret==1){
							//挂卡模式
							this.prizeData = res.data.prize
							if(this.pageStatus==2){
								this.prizeId = res.data.prize.id
								this.$refs.tunrTable.startAnimation()
							}else if (this.pageStatus==3){
								this.prizeStatus = 1
								//转盘模式
								let _this = this
								setTimeout(()=>{
									_this.hasPrize = true
								},300)
							}else if(this.pageStatus==1){
								this.pageStatus=11
							}
							
							
						}else{
							if(this.pageStatus==2){
								this.$refs.tunrTable.startAnimation()
								this.prizeId = 0
								this.prizeData = null
							}else if (this.pageStatus==3){
								setTimeout(()=>{
									this.hasPrize = true
									this.prizeStatus = 2
								},1000)
							}else if(this.pageStatus==1){
								this.pageStatus=12
							}
						}
								
						this.$emit('finish')
					}else{
						uni.showToast({title:res.text,icon:'none'});
						this.lottSock = false
					}
				})
			},
			//关闭广告
			handlerGua(){
				this.showAdv = false
			},
			//开始刮奖
			getPrize(){
				console.log('开始')
				this.guaSock = true
				// this.start()
			},
			//刮奖结束了
			handlerGuafinish(){
				console.log('挂完了')
				this.start()
			},
			//重置抽奖
			closePrize(){
				if(this.chance==0){
					uni.showToast({
						title:'没有游戏机会了哦',icon:'none'
					})
					return
				}
				this.hasPrize = false
				
				if(this.pageStatus==3){
					//刮奖需要重置
					this.hasPrize = false
					this.guaData.content = '还差一点，继续刮！'
					this.showAdv = true
					this.$refs.guaCanvas.initDrawCanvas()
				}
					
			},
			aginGua(){
				if(this.chance==0){
					uni.showToast({
						title:'没有游戏机会了哦',icon:'none'
					})
					return
				}
				this.hasPrize = false
				this.guaData.content = '还差一点，继续刮！'
				this.showAdv = true
				this.$refs.guaCanvas.initDrawCanvas()
			},
			
			//转盘获取奖品
			getPrizeList(){
				getActivityPrize({actid:this.actid},this.plugin).then(res=>{
					this.prizeList = res.data
					let url = this.qiniuUrl+'goodluck02.png'
					let obj = {
						title:'谢谢参与',
						id:0,
						type:4,
						image:url
					}
					this.prizeList.push(obj)
				})
			},
			//转盘抽奖开始
			getPrizeTunTable(){
				if(this.chance==0){
					uni.showToast({
						title:'没有抽奖机会了哦',
						icon:'none'
					})
					return
				}
				if(this.lottSock){
					uni.showToast({
						title:'开奖中请勿重复点击',
						icon:'none'
					})
					return
				}
				this.lottSock = true
				this.start()
			},
			//转盘抽奖结束
			handlerWheelfinish(){
				this.lottSock = false
				if(this.prizeData==null){
					uni.showToast({
						title:'谢谢参与',
						icon:'none',
						duration:3000
					})
					return
				}
				this.hasPrize = true
			},
			//翻卡抽奖
			rotateCard(val){
				if(this.lottSock)return
				this.lottSock = true
				if(this.chance==0){
					uni.showToast({
						title:'当前活动次数不足',
						icon:'none'
					})
					this.lottSock = false
					return
				}
				if(this.noCardBg!=-1 || this.animationSock){
					this.startAnimation()
					this.lottSock = false
					return
				}
			
				let _t = this
				workLottery({actid:this.actid,plugin:this.plugin.plugin},this.plugin.type,this.plugin.plugin).then(res=>{
					if(res.code==0){
						_t.startAni = val
						this.animationSock = true
						setTimeout(() => {
							_t.noCardBg = val
							if(res.data.ret==1){
								_t.prizeData = res.data.prize
							}else{
								_t.prizeData = {
									type:0,
									image:require('../../static/guess/prize.png'),
									title:res.data.msg
								}
							}
							
						}, 500);
						setTimeout(() => {
							_t.animationSock = false
							_t.lottSock = false
						}, 1300);
						this.$emit('finish')
					}else{
						uni.showToast({title:res.text,icon:'none'});
					}
					
				})
			},
			//洗牌
			startAnimation(val){
				if(this.animationSock){
					return
				}
				this.animationSock = true
				this.washCard = true
				this.noCardBg = -1
				this.startAni = -1
				setTimeout(()=>{
					this.washCard = false
					this.animationSock = false
				},2000)
			},				
			
		},
		async mounted() {
			this.actid = this.$route.query.id
			this.data = JSON.parse(uni.getStorageSync(this.actid+'ActivityData'))
			this.pageStatus = this.data.settings.prize_play_type
			this.initAds()
			let loginStatus = await checkLogin()
			if(loginStatus && this.data.settings.prize_play_type==2){
				 this.getPrizeList()
			}
		},
	}
</script>

<style lang="scss" scoped>
.cards{
	.card_con{
		margin-top: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			.card{
				width: 186rpx;
				height: 200rpx;
				background-color: #FBE5F2;
				border-radius: 12rpx;
				img{
					width: 186rpx;
					height: 200rpx;
				}
				&:nth-child(2){
					margin: 0 23rpx;
				}
				.prize_info{
					// &::before{
					// 	content: "";
					// 	display: table;
					// }
					.prize_img{
						// margin-top: 12rpx;
						width: 140rpx;
						height: 140rpx;
						margin: 12rpx auto 0;
						background-size: cover!important;
					}
					.prize_title{
						text-align: center;
						height: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #AA0C2C;
					}
				}
			}
		}
}

	.modal_lott{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		.content{
			// margin: 233rpx auto 0;
			position: relative;
			width: 640rpx;
			height: 520rpx;
			border-radius: 20rpx;
			.text{
				margin-top: 60rpx;
				text-align: center;
				height: 65rpx;
				font-size: 46rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.vote_ads{
				position: absolute;
				top: -267rpx;
				left: 0;
				line-height: 0;
				width: 640rpx;
				height: 300rpx;
				z-index: -1;
				img{
					width: 640rpx;
					height: 300rpx;
					border-radius: 20rpx;
				}
			}
			.chance{
				position: absolute;
				bottom: -76rpx;
				left: 50%;
				width: 280rpx;
				margin-left: -140rpx;
				text-align: center;
				height: 42rpx;
				line-height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				span{
					color: #F5D716;
					margin: 0 8rpx;
				}
			}
			.close{
				position: absolute;
				bottom: -174rpx;
				left: 50%;
				width: 70rpx;
				height: 70rpx;
				margin-left: -35rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.lott{
			width: 640rpx;
			height: 609rpx;
			background: url('../../static/vote/lott_prize.png') ;
			background-size: cover;
			.vote_ads{
				top:-240rpx
			}
			.btn{
				margin: 426rpx auto 0;
				width: 354rpx;
				height: 84rpx;
				border: 4rpx solid #FFFFFF;
				line-height: 84rpx;
				background: linear-gradient(180deg, #FE7F00 0%, #FE5D00 100%);
				box-shadow: inset 0px 3rpx 24rpx 1rpx rgba(254,250,231,0.7);
				border-radius: 45rpx;
				font-size: 34rpx;
				text-align: center;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.msg{
				margin-top: 20rpx;
				height: 33rpx;
				line-height: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
				color: #666666;
				span{
					margin-left: 8rpx;
					color: #3B76FF;
				}
			}
		}
		.lottGua{
			width: 640rpx;
			height: 603rpx;
			height: auto;
			padding-bottom: 40rpx;
			background: #FFFFFF;
			.title{
				margin-top: 60rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.gua{
				margin: 60rpx auto 0;
				width: 596rpx;
				height: 325rpx;
				border-radius: 20rpx;
				// background: url('../../static/vote/gua_bg.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover!important;
				position: relative;
				z-index: 1;
				// border: 1rpx solid red;
				padding-top: 1rpx;
				.do{
					position: relative;
					background: url('../../static/guess/white_flower.png') center center no-repeat;
					background-size: cover;
					width: 554rpx;
					height: 271rpx;
					margin: 40rpx auto 0;
					.gua_img_box{
						position: absolute;
						left: 14rpx;
						top: 12rpx;
						width: 528rpx;
						height: 242rpx;
						z-index: 10;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.gua_com{
						position: absolute;
						left: 14rpx;
						top: 12rpx;
						z-index: 9;
						width: 528rpx;
						height: 242rpx;
						.guaRef{
							width: 528rpx;
							height: 242rpx;
						}
					}
					
				}
				.prize{
					position: absolute;
					left: 0;
					top: 0;
					z-index: 99;
					width: 100%;
					height: 100%;
					background: rgba(0,0,0,0.7);
					.modal_title{
						margin-top: 26rpx;
						height: 42rpx;
						line-height: 42rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
					}
					.classImage{
						margin-top: 13rpx;
						text-align: center;
						height: 160rpx;
						image{
							width: 160rpx;
							height:160rpx
						}
					}
					.prize_title{
						margin-top: 13rpx;
						height: 42rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						text-align: center;
						color: #FFFFFF;
					}
					.aglin{
						margin:121rpx 0 0 161rpx;
						width: 290rpx;
						height: 90rpx;
						line-height: 90rpx;
						background: linear-gradient(180deg, #FE7F00 0%, #FE5D00 100%);
						box-shadow: inset 0px 3rpx 24rpx 1rpx rgba(254,250,231,0.7);
						border-radius: 45rpx;
						font-size: 34rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
			.msg{
				margin-top: 40rpx;
				height: 33rpx;
				line-height: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
				color: #666666;
				span{
					margin-left: 8rpx;
					color: #3B76FF;
				}
			}
		}
		.lottWheel{
			height: auto;
			padding-bottom: 40rpx;
			.msg{
				position: relative;
				z-index: 999;
			}
			.wheel_con{
				margin: 30rpx auto 0;
				width: 596rpx;
				height: 488rpx;
				border-radius: 20rpx;
				position: relative;
				z-index: 1;
				padding-top: 1rpx;
				 .wheel_com{
					 margin: 0 auto;
					 width: 544rpx;
					 height: 664rpx;
					 .wheel_c{
						 transform: scale(0.73);
						 position: absolute;
						 left: -74rpx;
						 top: -120rpx;
					 }
				 }
				.prize{
					position: absolute;
					left: 48rpx;
					top: 0;
					z-index: 99;
					width: 512rpx;
					height: 512rpx;
					background: rgba(0,0,0,0.7);
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.modal_title{
						margin-top: 26rpx;
						height: 42rpx;
						line-height: 42rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
					}
					.classImage{
						margin-top: 13rpx;
						text-align: center;
						height: 160rpx;
						image{
							width: 160rpx;
							height:160rpx
						}
					}
					.prize_title{
						margin-top: 13rpx;
						height: 42rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						text-align: center;
						color: #FFFFFF;
					}
				}
			}
		}
		.prize_modal{
			width: 640rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding-bottom: 40rpx;
			.top_img{
				width: 501rpx;
				height: 137rpx;
				margin: -45rpx auto 0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.classImage{
				text-align: center;
				image{
					width: 200rpx;
					height: 200rpx;
				}
			}
			.prize_title{
				margin-top: 26rpx;
				text-align: center;
				height: 42rpx;
				line-height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				&>view{
					width: 290rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: linear-gradient(180deg, #FE7F00 0%, #FE5D00 100%);
					box-shadow: inset 0px 3rpx 24rpx 1rpx rgba(254,250,231,0.7);
					border-radius: 45rpx;
					font-size: 34rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					margin: 38rpx 10rpx 0;
				}
				.back{
					border: 3px solid #717D8F;
					width: 284rpx;
					height: 84rpx;
					line-height: 84rpx;
					background: none;
					color: #717D8F;
				}
			}
		}
	}


	@keyframes ani1 {
		0%{
			position: relative;
			
		}
		5%{
			marign: 0 10rpx;
		}
		9%{
			margin: 0 -20rpx;
		}
		13%{
			// margin: 0 -80rpx;
			margin: 0 -40rpx;
		}
		17%{
			// margin: 0 -130rpx;
			margin: 0 -60rpx;
		}
		21%{
			// margin: 0 -160rpx;
			margin: 0 -80rpx;
		}
		23%{
			margin: 0 -93rpx;
			// margin: 0 -180rpx;''
		}
		// 25%{
		// 	margin: 0 -160rpx;
		// }
		// 30%{
		// 	margin: 0 -93rpx;
		// }
		55%{
			position: absolute;
		}
		58%{
			transform: scale(0.9);
		}
		61%{
			transform: scale(1.1);
		}
		64%{
			transform: scale(1);
		}
		84%{
			// margin: 0 -180rpx;
		}
		80%{
			margin: 0 -93rpx;
		}
		84%{
			margin: 0 -60rpx;
		}
		90%{
			margin: 0 -20rpx;
		}
		99%{
			margin: 0 10rpx;
			// margin: 0;
		}
		100%{
			position: relative;
		}
	}
	@keyframes  ani2{
		0%{
			transform: scale(1);
		}
		11%{
			transform: scale(0.95);
		}
		18%{
			transform: scale(1.02)
		}
		20%{
			transform: rotateY(0deg);
		}
		25%{
			transform: rotateY(30deg);
		}
		50%{
			transform: rotateY(90deg);
		}
		65%{
			transform: rotateY(60deg);
		}
		79%{
			
		}
		80%{
			transform: rotateY(0deg);
		}
		100%{
			
		}
	}
	 
	.an1_carsh{
		animation: ani1 2s linear infinite;
	}
	.an1_rotate{
		animation: ani2 1s linear 1;
	}
</style>